<!--
 * @name: index.vue
 * @author: XU>.<CHEN
 * @date: 2022-03-01 22:14
 * @description：单页入口
 * @update: 2022-03-01 22:14
 -->
<template>
  <div class="page">
    <!--<div class="nav_bar">-->
    <!--  <div class="menu nav_bar_item">-->
    <!--    <div class="logo">logo</div>-->
    <!--    <ul>-->
    <!--      <li :class="activeRoute === '/' ? 'active' : ''" @click="$router.push('/')">首页</li>-->
    <!--      <li v-for="item in store.state.core.routeAuth" :key="item.id" :class="activeRoute === item.menuPath ? 'active' : ''" @click="$router.push(item.menuPath)">{{ item.menuName }}</li>-->
    <!--    </ul>-->
    <!--  </div>-->
    <!--  <div class="quick_enter nav_bar_item">-->
    <!--    <div id="avatar" class="avatar" @mouseleave="avatarLeave">-->
    <!--      <div id="avatarDefault" class="avatar_default avatar_noHover" @mouseenter="avatarHover">-->
    <!--        <img src="../assets/images/roll_logo.png" alt="">-->
    <!--      </div>-->
    <!--      <div id="personal" class="person_info p_hidden">-->
    <!--        <div class="empty"></div>-->
    <!--        <div class="person_container">-->
    <!--          <p>真不是个人吖</p>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <ul>-->
    <!--      <li>消息中心</li>-->
    <!--      <li>卷一卷</li>-->
    <!--    </ul>-->
    <!--    <div class="save_btn"><el-button class="center">我要填报</el-button></div>-->
    <!--  </div>-->
    <!--</div>-->
    <div class="main_container container">
      <Index v-if="$route.path === '/'"></Index>
      <router-view v-else></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {getCurrentInstance, reactive, ref, watch} from 'vue'
import Index from '@/views/home/HomePage.vue'
import { useRouter } from 'vue-router'
import { useStore } from "vuex";
const { proxy } = getCurrentInstance() as any

const activeRoute = ref<string>('')
const store = useStore()
const useRouterCurrent = reactive(useRouter())

watch(useRouterCurrent, newVal => {
  activeRoute.value = newVal.currentRoute.path
}, {
  immediate: true,
})

// 头像动画
function avatarHover(ev: Event) {
  const oAvatarDefault = document.querySelector('#avatarDefault')
  const oPersonal = document.querySelector('#personal')
  console.dir(oAvatarDefault)
  if (oAvatarDefault) oAvatarDefault.className = 'avatar_default avatar_hover'
  if (oPersonal) oPersonal.className = 'person_info p_show'
}
function avatarLeave(ev: Event) {
  const oAvatarDefault = document.querySelector('#avatarDefault')
  const oPersonal = document.querySelector('#personal')
  if (oAvatarDefault) oAvatarDefault.className = 'avatar_default avatar_noHover'
  if (oPersonal) oPersonal.className = 'person_info p_hidden'
}

</script>
<style lang='scss' scoped>
  .page {
    width: 100%;
    min-height: 100vh;
  }
  .center {
    position:relative;
    top: 50%;
    transform: translateY(-50%)
  }
  .nav_bar {
    width: 100%;
    height: 40px;
    background-color: black;
    display: flex;
    justify-content: space-between;
    .nav_bar_item {
      width: 20px;
      height: 100%;
      color: #D4D4D5;
      font-size: 14px;
      &:nth-child(1) {
        width: 800px;
      }
      &:nth-child(2) {
        width: 350px;
      }
    }
  }
  .container {
    padding: 0 50px;
    box-sizing: border-box;
  }
  .menu {
    display: flex;
    justify-content: space-between;
  }
  .menu ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 600px;
    height: 100%;
    li {
      width: 80px;
      height: 100%;
      text-align: center;
      cursor: pointer;
      line-height: 40px;
      letter-spacing: 1px;
      &:hover {
        color: #50A1FF;
      }
    }
  }
  .logo {
    height: 100%;
    width: 80px;
    line-height: 40px;
    text-align: center;
  }
  .quick_enter {
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    ul {
      height: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      li {
        width: 80px;
        height: 100%;
        cursor: pointer;
        text-align: center;
        line-height: 40px;
        letter-spacing: 1px;
        &:hover {
          color: #50A1FF;
        }
      }
    }
  }
  .avatar {
    width: 30px;
    height: 30px;
    position: relative;
    pointer-events: fill;
    .avatar_default {
      border: 2px white solid;
      border-radius: 50%;
      overflow: hidden;
      line-height: 30px;
      background-color: white;
      font-size: 12px;
      text-align: center;
      cursor: pointer;
      flex-shrink: 0;
      position: relative;
      z-index: 101;
      transition: all 0.3s ease 200ms;
    }
    .avatar_noHover {
      width: 26px;
      height: 26px;
      left: 0;
    }
    .avatar_hover {
      width: 70px;
      height: 70px;
      position: relative;
      left: -40px;
    }
    .person_info {
      width: 300px;
      height: 500px;
      position: absolute;
      top: 30px;
      left: -150px;
      z-index: 100;
      transition: visibility 0.3s ease 200ms, opacity 0.3s ease 200ms;
      .empty {
        height: 20px;
      }
      .person_container {
        padding: 20px;
        background-color: #ffffff;
        height: 480px;
        border-radius: 10px;
        box-shadow: 0 0 10px 2px rgba(0,0,0,.06);
      }
    }
    .p_hidden {
      visibility: hidden;
      opacity: 0;
    }
    .p_show {
      visibility: visible;
      opacity: 100%;
    }
    img {
      width: 100%;
      height: 100%;
      background-size: cover;
    }
  }
  .save_btn {
    width: 80px;
    height: 100%;
    button {
      background-color: #169BD5;
      color: white;
      border: none;
      font-size: 14px;
      font-weight: normal;
      letter-spacing: 1px;
      &:hover {
        background-color: pink;
        color: black;
      }
    }
  }
  .active {
    color: #50A1FF;
  }
</style>
